<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
        <ul>
            <li v-for="(item,index) of arr" :key=item.id>
                 {{item.name}}: <input type="checkbox">
            </li>
        </ul>
        <h1>{{nick.name}}</h1>
        <h2>{{nick.say}}</h2>
        <button @click="add()">添加</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    <script>
        //v-for中key作用
        //key的作用就是用于在diff算法的时候去表示元素的唯一性,提高diff的性能
        //高效更新vue的底层
        //key的作用

        //vue有些情况视图不会更新
        //直接操作数组的length
        //直接操作数组的index

        //为什么？
        //Obeject.defineProperty不能直接劫持数组
        //vue采用了hack的手段
        //数组原型的七个方法
        //push、pop、shift、unshift、splice、reverse、sort

        /**
         * 直接给data添加响应的属性
         * 视图是不会直接显示的
         * 怎么解决？
         * vm.$set(目标元素,"属性",属性值)
         * **/

         /**
          * 强制跟新
          *vm.$forceUpdate()
         */
      const vm = new Vue({
        el: "#app",
        data: {
          arr: [
            { id: 1, name: "守岁" },
            { id: 2, name: "吃汤圆" },
            { id: 3, name: "包包子" },
            { id: 4, name: "炸肉圆" },
          ],
          nick:{
            name:"郭奶奶说"
          }
        },
        methods: {
            add(){
                // this.nick.age=20;
                // vm.$set(this.nick,'say',"大肠包小肠")
            }
        },
      });
    </script>
  </body>
</html>
